<template>
  <div class="bg-white">
    <!-- <img src="https://ecodestore.oss-cn-beijing.aliyuncs.com/gh_bcdb7f9a7d01_258.jpg" class="w-64 h-64 mx-auto"
        alt="" />

      <div class="text-center mt-4 text-lg">敬请期待</div> -->
    <div class="py-4 shaw content" v-if="type === '静态码'">
      <el-row>
        <el-col :span="16">
          <div
            class="m-4 p-4 bg-white inputDeep"
            style="height: 360px; border-radius: 20px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
          >
            <el-input
              v-model="textarea"
              class="pass_input"
              style="width: 100%; border: none"
              rows="12"
              :maxlength="150"
              placeholder="请输入内容或网址"
              show-word-limit
              resize="none"
              type="textarea"
            />
          </div>
          <div class="text-center mt-4">
            <el-button
              color="rgba(248,210,2,1)"
              size="large"
              style="width: 300px; height: 50px; font-size: 16px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
              @click="getqrCode()"
              >生成二维码</el-button
            >
          </div>
        </el-col>
        <el-col :span="8">
          <div
            class="m-4 p-4 bg-white cc"
            style="height: 360px; border-radius: 20px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
          >
            <div v-if="textarea === ''" class="w-full h-full bg-white" style="padding-top: 40px; text-align: center">
              <img
                v-if="textarea !== ''"
                :src="qrCode"
                alt="此处生成二维码"
                style="width: 175px; height: 175px; margin: 0 auto"
              />
              <img
                v-else
                src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/urls/%E5%9B%BE%E7%89%87%205%401x.png"
                alt="此处生成二维码"
                style="width: 175px; height: 175px; margin: 0 auto"
              />
            </div>
            <div
              v-else
              class="bg-white"
              style="
                display: flex;
                place-items: center center;
                align-items: center;
                justify-content: center;
                padding: 20px;
                text-align: center;
              "
            >
              <qrcode-vue :value="textarea" class="qrcode" size="175" style="margin: 0 auto" />
            </div>
          </div>
          <div class="text-center mt-4" v-if="textarea !== ''">
            <el-button
              color="#fff"
              size="large"
              style="width: 140px; height: 50px; font-size: 16px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
              @click="downloadImg()"
              >下载二维码</el-button
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="py-4 shaw content" v-else-if="type === '网址'">
      <el-row>
        <el-col :span="16">
          <div
            class="m-4 p-4 bg-white inputDeep url"
            style="height: 360px; border-radius: 20px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
          >
            <el-input
              v-model="url"
              class="pass_input"
              style="width: 100%; height: 60px; margin-top: 120px; text-align: left !important; border: none"
              :maxlength="150"
              placeholder="http(s)://"
              type="url"
            />
          </div>
          <div class="text-center mt-4">
            <el-button
              color="rgba(248,210,2,1)"
              size="large"
              style="width: 200px; height: 40px; font-size: 16px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
              @click="getqrCode()"
              >生成二维码</el-button
            >
          </div>
        </el-col>
        <el-col :span="8">
          <div
            class="m-4 p-4 bg-white cc"
            style="height: 360px; border-radius: 20px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
          >
            <div v-if="url === ''" class="w-full h-full bg-white" style="padding-top: 40px; text-align: center">
              <img
                v-if="qrCode !== ''"
                :src="qrCode"
                alt="此处生成二维码"
                style="width: 175px; height: 175px; margin: 0 auto"
              />
              <img
                v-else
                src="https://www.hlcode.cn/_nuxt/img/qr-default-2.5129466.png"
                alt="此处生成二维码"
                style="width: 175px; height: 175px; margin: 0 auto"
              />
            </div>
            <div
              v-else
              class="bg-white"
              style="
                display: flex;
                place-items: center center;
                align-items: center;
                justify-content: center;
                padding: 20px;
                text-align: center;
              "
            >
              <qrcode-vue :value="url" class="qrcode" size="175" style="margin: 0 auto" />
            </div>
          </div>
          <div class="text-center mt-4" v-if="textarea !== ''">
            <el-button
              color="#fff"
              size="large"
              style="width: 140px; height: 50px; font-size: 16px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
              @click="downloadImg()"
              >下载二维码</el-button
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="py-4 shaw content" v-else>
      <el-row>
        <el-col :span="16">
          <div v-if="!r">
            <div
              class="m-4 p-4 bg-white text-center"
              v-if="type === '图片'"
              style="
                position: relative;
                display: flex;
                place-items: center center;
                justify-content: start;
                width: 100%;
                height: 400px;
                overflow-y: scroll;
                border-radius: 20px;
                box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
              "
            >
              <div class="absolute right-2 top-2" style="z-index: 99">
                <el-select
                  v-model="value"
                  placeholder="Select"
                  size="large"
                  style="width: 240px"
                  @change="selectChanged"
                >
                  <el-option label="平铺" value="平铺" />
                  <el-option label="滚动" value="滚动" />
                </el-select>
              </div>
              <el-upload
                action="#"
                :http-request="UploadOss"
                list-type="picture-card"
                class="img"
                :auto-upload="true"
                :accept="accept"
                :on-remove="handleRemove"
                :on-preview="handlePictureCardPreview"
                style="max-height: 400px; padding: 20px; margin: 0 auto"
              >
                <div>
                  <svg
                    t="1730476980227"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4582"
                    width="56"
                    height="56"
                    style="margin: 0 auto"
                  >
                    <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="4583"></path>
                    <path
                      d="M955.733333 238.933333a170.666667 170.666667 0 1 0-341.333333 0 170.666667 170.666667 0 0 0 341.333333 0zM448.7168 290.816a34.133333 34.133333 0 0 0-59.255467 0L38.673067 904.635733A34.133333 34.133333 0 0 0 68.3008 955.733333h701.576533a34.133333 34.133333 0 0 0 29.627734-51.063466L448.750933 290.781867z"
                      fill="#11AA66"
                      p-id="4584"
                    ></path>
                    <path
                      d="M721.3056 529.749333a34.133333 34.133333 0 0 1 59.255467 0l214.254933 374.920534A34.133333 34.133333 0 0 1 965.188267 955.733333H536.6784a34.133333 34.133333 0 0 1-29.627733-51.063466l214.254933-374.954667z"
                      fill="#FFAA44"
                      p-id="4585"
                    ></path>
                  </svg>
                  <div class="mt-2">请上传图片</div>
                </div>
              </el-upload>
            </div>
            <div
              class="m-4 p-4 bg-white text-center"
              v-if="type === '音视频' || type === '文件'"
              style="
                position: relative;
                display: flex;
                place-items: center center;
                justify-content: center;
                height: 400px;
                overflow-y: scroll;
                border-radius: 20px;
                box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
              "
            >
              <el-upload
                action="#"
                :http-request="UploadOss"
                list-type="text"
                :auto-upload="true"
                :accept="accept"
                :show-file-list="false"
                :on-progress="uploadVideoProcess"
                drag
                style="width: 200px; max-height: 400px; padding: 20px; margin: 0 auto"
                v-if="list.length === 0"
              >
                <div v-if="!progressFlag">
                  <svg
                    v-if="type === '音视频'"
                    t="1730724295800"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2566"
                    width="56"
                    height="56"
                    style="margin: 0 auto"
                  >
                    <path
                      d="M957.952 270.08v495.36c0 112.384-91.136 203.52-203.52 203.52h-495.36c-112.384 0-203.52-91.136-203.52-203.52V270.08c0-112.64 91.136-203.52 203.52-203.52h495.36c112.256 0 203.52 90.88 203.52 203.52z"
                      fill="#53DEDC"
                      p-id="2567"
                    ></path>
                    <path
                      d="M957.952 270.08v52.608h-902.4V270.08c0-19.84 2.816-39.04 7.808-57.216 2.048-6.272 4.224-12.288 6.528-18.432 1.024-2.816 2.304-5.248 3.584-8.064 14.08-31.488 35.968-58.624 63.488-79.104 24.192-18.432 52.864-31.232 84.096-36.992 8.832-1.792 17.92-3.072 27.136-3.328 3.584-0.512 7.04-0.512 10.88-0.512h495.36c45.312 0 87.168 14.848 120.832 39.808 16.384 12.032 30.72 26.496 42.624 42.624 9.6 13.056 17.92 27.136 24.192 42.624 0.512 1.024 0.768 2.048 1.28 3.072 0.512 1.024 1.024 2.304 1.28 3.328 1.536 3.84 2.816 7.296 3.84 11.392 6.144 18.944 9.472 39.68 9.472 60.8z"
                      fill="#FFFFFF"
                      p-id="2568"
                    ></path>
                    <path
                      d="M136.832 107.392c-27.392 20.352-49.408 47.616-63.488 79.104l-10.112 26.496c-4.992 18.176-7.808 37.248-7.808 57.216v52.608h40.832l128-128-87.424-87.424zM390.016 66.56H258.944c-3.84 0-7.296 0-10.88 0.512l127.488 127.488-128.128 128.128h142.336L517.888 194.56 390.016 66.56zM683.904 66.56H541.568l128 128-128.512 128.128h142.592L811.776 194.56zM948.352 209.152l-113.536 113.536h123.136V270.08c0-21.12-3.328-41.856-9.6-60.928z"
                      fill="#282828"
                      p-id="2569"
                    ></path>
                    <path
                      d="M944.512 197.76H163.84v-6.272h778.24c0.512 1.024 0.768 2.048 1.28 3.072 0.384 0.896 0.896 2.176 1.152 3.2zM55.552 321.024h902.4v4.608h-902.4z"
                      fill="#282828"
                      p-id="2570"
                    ></path>
                  </svg>
                  <svg
                    v-if="type === '文件'"
                    t="1730701084835"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2385"
                    width="56"
                    height="56"
                    style="margin: 0 auto"
                  >
                    <path
                      d="M170.2 246.4h342.1s44.2-77.8 89.1-77.8h254.9c20.7 0 37.7 19.8 37.7 44l1.1 598.1c0 24.2-19.8 44-44 44h-681c-24.2 0-44-19.8-44-44V290.4c0.1-24.2 19.9-44 44.1-44z"
                      fill="#694B4B"
                      p-id="2386"
                    ></path>
                    <path d="M862.9 671.5l-688 38.3-22.2-406.4 688.1-59.3z" fill="#593F3F" p-id="2387"></path>
                    <path d="M870.8 671.8L242.2 707l-21.1-388 634.6-35.2z" fill="#593F3F" p-id="2388"></path>
                    <path d="M840.7 673.7L218.1 725l-21.9-383.4 623.4-55.9z" fill="#FFFFFF" p-id="2389"></path>
                    <path d="M807.9 715.1L178.6 750l-22.2-406.3 629.7-48.1z" fill="#F2F2F1" p-id="2390"></path>
                    <path d="M796 713.5l-619 36.3-22.1-406.3 618.8-40.1z" fill="#FFFFFF" p-id="2391"></path>
                    <path
                      d="M895.2 425.1H509.1s-44.2-71.4-89.1-71.4H125.1c-20.7 0-38.9 16.3-38.9 36l40 429.2c0 19.7 19.8 35.8 44 35.8h685c24.2 0 44-16.1 44-35.8l40-358c0-19.7-19.8-35.8-44-35.8z"
                      fill="#00B5FC"
                      p-id="2392"
                    ></path>
                  </svg>

                  <div class="mt-2">请上传文件</div>
                </div>
                <div v-else>上传中。。。</div>
              </el-upload>
              <div v-else>
                <div style="width: 100%" v-if="list[0].key == '视频'">
                  <svg
                    t="1730542914549"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="8851"
                    width="56"
                    height="56"
                    style="margin: 0 auto"
                  >
                    <path
                      d="M957.952 270.08v495.36c0 112.384-91.136 203.52-203.52 203.52h-495.36c-112.384 0-203.52-91.136-203.52-203.52V270.08c0-112.64 91.136-203.52 203.52-203.52h495.36c112.256 0 203.52 90.88 203.52 203.52z"
                      fill="#53DEDC"
                      p-id="8852"
                    ></path>
                    <path
                      d="M957.952 270.08v52.608h-902.4V270.08c0-19.84 2.816-39.04 7.808-57.216 2.048-6.272 4.224-12.288 6.528-18.432 1.024-2.816 2.304-5.248 3.584-8.064 14.08-31.488 35.968-58.624 63.488-79.104 24.192-18.432 52.864-31.232 84.096-36.992 8.832-1.792 17.92-3.072 27.136-3.328 3.584-0.512 7.04-0.512 10.88-0.512h495.36c45.312 0 87.168 14.848 120.832 39.808 16.384 12.032 30.72 26.496 42.624 42.624 9.6 13.056 17.92 27.136 24.192 42.624 0.512 1.024 0.768 2.048 1.28 3.072 0.512 1.024 1.024 2.304 1.28 3.328 1.536 3.84 2.816 7.296 3.84 11.392 6.144 18.944 9.472 39.68 9.472 60.8z"
                      fill="#FFFFFF"
                      p-id="8853"
                    ></path>
                    <path
                      d="M136.832 107.392c-27.392 20.352-49.408 47.616-63.488 79.104l-10.112 26.496c-4.992 18.176-7.808 37.248-7.808 57.216v52.608h40.832l128-128-87.424-87.424zM390.016 66.56H258.944c-3.84 0-7.296 0-10.88 0.512l127.488 127.488-128.128 128.128h142.336L517.888 194.56 390.016 66.56zM683.904 66.56H541.568l128 128-128.512 128.128h142.592L811.776 194.56zM948.352 209.152l-113.536 113.536h123.136V270.08c0-21.12-3.328-41.856-9.6-60.928z"
                      fill="#282828"
                      p-id="8854"
                    ></path>
                    <path
                      d="M944.512 197.76H163.84v-6.272h778.24c0.512 1.024 0.768 2.048 1.28 3.072 0.384 0.896 0.896 2.176 1.152 3.2zM55.552 321.024h902.4v4.608h-902.4z"
                      fill="#282828"
                      p-id="8855"
                    ></path>
                  </svg>
                  <div class="mt-2">{{ decodeURIComponent(list[0].value.split('/').pop()) }}</div>
                  <div>{{ size }}</div>
                  <div class="mt-4">
                    <el-checkbox v-model="checked1" label="允许下载视频" size="large" border @change="checked1change" />
                    <el-checkbox v-model="checked2" label="视频竖屏展示" size="large" border @change="checked2change" />
                    <el-checkbox v-model="checked3" label="默认全屏播放" size="large" border @change="checked3change" />
                  </div>
                  <div class="mt-4">
                    <el-row>
                      <el-col :span="12">
                        <el-upload
                          action="#"
                          :http-request="UploadOss2"
                          list-type="text"
                          :auto-upload="true"
                          :accept="accept"
                          :show-file-list="false"
                          :on-progress="uploadVideoProcess"
                        >
                          <el-button type="primary" size="large" @click="uploadVideo">重新上传</el-button>
                        </el-upload>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary" size="large" @click="uploadVideo">再加一个</el-button>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <div style="width: 100%" v-if="list[0].key == '音频'">
                  <svg
                    t="1730550237516"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="10773"
                    width="56"
                    height="56"
                    style="margin: 0 auto"
                  >
                    <path
                      d="M788.14 928.23h-550c-77.32 0-140-62.68-140-140v-550c0-77.32 62.68-140 140-140h550c77.32 0 140 62.68 140 140v550c0 77.32-62.68 140-140 140z"
                      fill="#FF7878"
                      p-id="10774"
                    ></path>
                    <path
                      d="M682.2 326.8a27.8 27.8 0 0 0-10.04-21.39 27.807 27.807 0 0 0-22.87-5.93l-261.58 49.04c-13.15 2.46-22.67 13.94-22.67 27.32l0.18 250.12a64.668 64.668 0 0 0-22.39-3.98c-35.76 0-64.74 28.99-64.74 64.74 0 35.76 28.99 64.74 64.74 64.74s64.74-28.99 64.74-64.74V450.77l232.29-43.55v169.7a64.668 64.668 0 0 0-22.39-3.98c-35.76 0-64.74 28.99-64.74 64.74s28.99 64.74 64.74 64.74 64.74-28.99 64.74-64.74c-0.01-1.19-0.01-310.88-0.01-310.88z"
                      fill="#EF5252"
                      p-id="10775"
                    ></path>
                    <path
                      d="M682.2 314.8a27.8 27.8 0 0 0-10.04-21.39 27.807 27.807 0 0 0-22.87-5.93l-261.58 49.04c-13.15 2.46-22.67 13.94-22.67 27.32l0.18 250.12a64.668 64.668 0 0 0-22.39-3.98c-35.76 0-64.74 28.99-64.74 64.74 0 35.76 28.99 64.74 64.74 64.74s64.74-28.99 64.74-64.74V438.77l232.29-43.55v169.7a64.668 64.668 0 0 0-22.39-3.98c-35.76 0-64.74 28.99-64.74 64.74s28.99 64.74 64.74 64.74 64.74-28.99 64.74-64.74c-0.01-1.19-0.01-310.88-0.01-310.88z"
                      fill="#FFFFFF"
                      p-id="10776"
                    ></path>
                  </svg>
                  <div class="mt-2">{{ decodeURIComponent(list[0].value.split('/').pop()) }}</div>
                  <div>{{ size }}</div>
                  <div class="mt-4" style="min-width: 400px">
                    <el-row>
                      <el-col :span="12">
                        <el-upload
                          action="#"
                          :http-request="UploadOss2"
                          list-type="text"
                          :auto-upload="true"
                          :accept="accept"
                          :show-file-list="false"
                          :on-progress="uploadVideoProcess"
                        >
                          <el-button type="primary" size="large" @click="uploadVideo">重新上传</el-button>
                        </el-upload>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary" size="large" @click="uploadVideo">再加一个</el-button>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <div style="width: 100%" v-if="list[0].key == '文件'">
                  <img
                    :src="returnOfficeIcon(list[0].value)"
                    style="width: 56px; height: 56px; margin: 0 auto"
                    mode="scaleToFill"
                  />
                  <div class="mt-2">{{ decodeURIComponent(list[0].value.split('/').pop()) }}</div>
                  <div>{{ size }}</div>
                  <div class="mt-4">
                    <el-checkbox v-model="checked4" label="允许下载文件" size="large" border @change="checked4change" />
                  </div>
                  <div class="mt-4" style="min-width: 400px">
                    <el-row>
                      <el-col :span="12">
                        <el-upload
                          action="#"
                          :http-request="UploadOss2"
                          list-type="text"
                          :auto-upload="true"
                          :accept="accept"
                          :show-file-list="false"
                          :on-progress="uploadVideoProcess"
                        >
                          <el-button type="primary" size="large" @click="uploadVideo">重新上传</el-button>
                        </el-upload>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary" size="large" @click="uploadVideo">再加一个</el-button>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="type === '名片'"
              class="m-4 p-4 bg-white text-center"
              style="
                position: relative;
                display: flex;
                place-items: center center;
                justify-content: center;
                height: 400px;
                overflow-y: scroll;
                border-radius: 20px;
                box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
              "
            >
              <div style="width: 100%; margin-top: 20px">
                <el-form :model="card" label-width="auto">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="姓名">
                        <el-input v-model="card.name" />
                      </el-form-item>
                      <el-form-item label="手机">
                        <el-input v-model="card.phone" />
                      </el-form-item>
                      <el-form-item label="微信">
                        <el-input v-model="card.weixin" />
                      </el-form-item>
                      <el-form-item label="邮箱">
                        <el-input v-model="card.email" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="公司">
                        <el-input v-model="card.companyname" />
                      </el-form-item>
                      <el-form-item label="部门">
                        <el-input v-model="card.department" />
                      </el-form-item>
                      <el-form-item label="职位">
                        <el-input v-model="card.position" />
                      </el-form-item>
                      <el-form-item label="业务">
                        <el-input v-model="card.zyyw" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <div>
                        <el-avatar :size="100" :src="card.avatar" />
                      </div>
                      <el-upload
                        action="#"
                        :http-request="uploadAvatar"
                        list-type="text"
                        :auto-upload="true"
                        :accept="accept"
                        :show-file-list="false"
                        :on-progress="uploadVideoProcess"
                      >
                        <el-button type="primary" size="large" class="mt-4">上传头像</el-button>
                      </el-upload>
                    </el-col>
                  </el-row>
                  <div>
                    <el-form-item label="简介">
                      <el-input v-model="card.jj" type="textarea" rows="3" />
                    </el-form-item>
                  </div>
                  <div
                    class="cc"
                    style="
                      width: 100%; /* 或者设置为固定宽度 */
                      height: 100px; /* 固定高度 */
                      overflow-x: auto; /* 横向滚动 */
                      white-space: nowrap; /* 确保子元素在一行显示 */
                    "
                  >
                    <div
                      class="item"
                      v-for="(o, i) in bglist"
                      :key="i"
                      :class="{ selected2: isSelected(i) }"
                      @click="selectImage(i)"
                    >
                      <img :src="o.image" alt="" class="w-full h-full" />
                    </div>

                    <!-- 更多的 item -->
                  </div>
                </el-form>
              </div>
            </div>
            <div class="text-center mt-4">
              <el-button
                color="rgba(248,210,2,1)"
                size="large"
                style="width: 200px; height: 40px; font-size: 16px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
                @click="getqrCode()"
                >生成二维码</el-button
              >
            </div>
          </div>
          <div v-else>
            <div
              class="m-4 p-4 bg-white text-center"
              style="
                position: relative;
                display: flex;
                place-items: center center;
                justify-content: center;
                height: 400px;
                overflow-y: scroll;
                border-radius: 20px;
                box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
              "
            >
              <div>
                <img :src="rimg" style="width: 300px; height: 300px" />
                <el-button type="primary" size="large" class="mt-4" @click="downloadImage(rimg, '亿码互联二维码')"
                  >下载二维码</el-button
                >
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div
            class="m-4 p-4 bg-white cc"
            style="height: 400px; border-radius: 20px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
          >
            <div
              class="bg-white"
              style="
                display: flex;
                place-items: center center;
                align-items: center;
                justify-content: center;
                padding: 20px;
                text-align: center;
              "
            >
              <img :src="rimg" class="qrcode" size="175" style="width: 175px; height: 175px; margin: 0 auto" />
            </div>
          </div>
          <div class="text-center mt-4" v-if="textarea !== ''">
            <el-button
              color="#fff"
              size="large"
              style="width: 140px; height: 50px; font-size: 16px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
              @click="downloadImage(rimg, '亿码互联二维码')"
              >下载二维码</el-button
            >
          </div>
          <!-- <div class="m-4 p-4 bg-white cc" style="border-radius: 20px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)">
            <div class="component-preview">
              <div class="view-box" style="margin: 0 auto">
                <div class="mini-header">
                  <img
                    src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/mini-header-big-new.png"
                    alt=""
                  />
                  <div class="h3">效果示例</div>

                </div>
                <div class="mini-content">

                  <div class="p-2" v-if="type === '名片'">
                    <div
                      class="rounded-4"
                      style="
                        position: relative;
                        width: 100%;
                        height: 200px;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100% 100%;
                      "
                      :style="{ 'background-image': `url(${card.bg})` }"
                    >
                      <div style="position: absolute; top: 30px; right: 30px">
                        <img :src="card.avatar" mode="scaleToFill" class="w-16 h-16 rounded-full" />
                      </div>
                      <div style="position: absolute; top: 30px; left: 30px; font-weight: 800" class="text-2xl">
                        {{ card.name }}
                      </div>
                      <div style="position: absolute; top: 70px; left: 30px" class="text-xl">
                        {{ card.phone }}
                      </div>
                      <div style="position: absolute; bottom: 50px; left: 30px" class="text-lg">
                        {{ card.companyname }}
                      </div>
                      <div v-if="card.department" style="position: absolute; top: 160px; left: 30px" class="text-sm">
                        {{ card.department }} | {{ card.position }}
                      </div>
                    </div>

                    <div class="mt-4 px-2">
                      <div v-if="card">
                        <div class="mt-2" v-if="card.phone">
                          <div class="float-left">
                            <el-icon><Phone /></el-icon>
                          </div>
                          <div class="float-left ml-2">{{ card.phone }}</div>
                        </div>
                        <div style="clear: both"></div>
                        <div class="mt-2" v-if="card.weixin">
                          <div class="float-left">
                            <el-icon><ChatLineRound /></el-icon>
                          </div>
                          <div class="float-left ml-2">{{ card.weixin }}</div>
                        </div>
                        <div style="clear: both"></div>
                        <div class="mt-2" v-if="card.email">
                          <div class="float-left">
                            <el-icon><Message /></el-icon>
                          </div>
                          <div class="float-left ml-2">{{ card.email }}</div>
                        </div>
                        <div style="clear: both"></div>
                        <div class="mt-2" v-if="card.companyname">
                          <div class="float-left">
                            <el-icon><House /></el-icon>
                          </div>
                          <div class="float-left ml-2">{{ card.companyname }}</div>
                        </div>
                        <div style="clear: both"></div>
                        <div class="mt-2" v-if="card.department">
                          <div class="float-left">
                            <el-icon><Document /></el-icon>
                          </div>
                          <div class="float-left ml-2">{{ card.department }} - {{ card.position }}</div>
                        </div>
                        <div style="clear: both"></div>
                        <div class="mt-2" v-if="card.zyyw">
                          <div class="float-left">
                            <el-icon><List /></el-icon>
                          </div>
                          <div class="float-left ml-2">{{ card.zyyw }}</div>
                        </div>
                        <div style="clear: both"></div>
                        <div class="mt-2" v-if="card.jj">
                          <div class="float-left">
                            <el-icon><WarningFilled /></el-icon>
                          </div>
                          <div class="float-left ml-2">{{ card.jj }}</div>
                        </div>
                        <div style="clear: both"></div>
                      </div>

                      <el-button
                        style="width: 100%; margin-top: 20px; background-color: #fed440 !important"
                        @click="addPhoneContact()"
                      >
                        导入联系人
                      </el-button>
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="list.length == 0" class="no-data">
                      <img src="https://www.hlcode.cn/_nuxt/img/eg-img.b4c5f9a.png" alt="" />
                    </div>
                    <div v-else style="padding: 10px">
                      <div>
                        <div v-for="o in list" :key="o">
                          <div v-if="o.key == '图片'">
                            <img :src="o.value" />
                          </div>
                          <div v-if="o.key == '滚动'">
                            <el-carousel height="300px">
                              <el-carousel-item v-for="item in o.value" :key="item">
                                <img :src="item" alt="" />
                              </el-carousel-item>
                            </el-carousel>
                          </div>
                          <div v-if="o.key == '视频'"><video :src="o.value" controls /></div>
                          <div v-if="o.key == '音频'"><audio :src="o.value" controls /></div>
                          <div
                            v-if="o.key === '文件'"
                            class="p-2 border m-2"
                            style=""
                            :style="o.css"
                            @click="openfile(o)"
                          >
                            <el-row custom-style="margin-bottom: 10px">
                              <el-col :span="8">
                                <div class="p-4">
                                  <img
                                    :src="returnOfficeIcon(o.value)"
                                    style="width: 56px; height: 56px"
                                    mode="scaleToFill"
                                  />
                                </div>
                              </el-col>
                              <el-col :span="16">
                                <div class="onerow" style="width: 100%; padding-right: 20px">
                                  {{ decodeURIComponent(o.value.split('/')[o.value.split('/').length - 1]) }}
                                </div>
                                <div class="mt-4 font-100 text-left p-2 text-gray">
                                  {{ o.size }}
                                  <text
                                    v-if="o.download && o.download.length > 0"
                                    style="padding-left: 20px; color: #bd3124"
                                  >
                                    可下载，转发
                                  </text>
                                </div>
                              </el-col>
                            </el-row>

                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div> -->
          <!-- <div class="text-center mt-4" v-if="textarea !== ''">
            <el-button
              color="#fff"
              size="large"
              style="width: 140px; height: 50px; font-size: 16px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%)"
              @click="downloadImg()"
              >下载二维码</el-button
            >
          </div> -->
        </el-col>
      </el-row>
    </div>
  </div>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

import { fileput, formatBytes } from '@/utils/ali-oss';
import moment from 'moment';
import { getSettingbyKey } from '@/utils/index.js';

import SnowflakeId from 'snowflake-id';
import { ClickOutside as vClickOutside } from 'element-plus';
import QrcodeVue from 'qrcode.vue';

import { dayjs } from 'element-plus';
import { uploadfile_saveone, saveQrcode } from '@/api/index.js';
import { ElMessage } from 'element-plus';
const props = defineProps({
  type: String,
});
let r = ref(false);
let rimg = ref(
  'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/urls/%E5%9B%BE%E7%89%87%205%401x.png',
);
const card = ref({});
let selectedIndex = ref(0);
console.log('selectedIndex:', selectedIndex.value);
const qrCode = ref(
  'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/urls/%E5%9B%BE%E7%89%87%205%401x.png',
);

const bglist = ref([
  { image: getSettingbyKey('名片背景1') },
  { image: getSettingbyKey('名片背景2') },
  { image: getSettingbyKey('名片背景3') },
  { image: getSettingbyKey('名片背景4') },
  { image: getSettingbyKey('名片背景5') },
  { image: getSettingbyKey('名片背景6') },
  { image: getSettingbyKey('名片背景7') },
]);
card.value.bg = bglist.value[0].image;
card.value.avatar = getSettingbyKey('默认头像');
function downloadImage(imageUrl, fileName) {
  const link = document.createElement('a');
  link.href = imageUrl;
  link.download = fileName || 'downloaded_image.jpg';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
// 使用示例：
// downloadImage('https://example.com/image.jpg', 'custom_image_name.jpg');
//card.value.department = '';
function selectImage(index) {
  console.log('selectImageindex:', index, selectedIndex.value);
  if (selectedIndex.value === index) {
    selectedIndex.value = null; // 如果已经选中了该图片，则取消选中
    card.value.bg = null;
  } else {
    selectedIndex.value = index; // 选择该图片
    card.value.bg = bglist.value[selectedIndex.value].image;
  }
}

function isSelected(index) {
  console.log('index:', selectedIndex.value, selectedIndex.value === index);
  return selectedIndex.value === index;
}

function CheckUrl(str) {
  var RegUrl = new RegExp();
  RegUrl.compile('^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$'); //jihua.cnblogs.com
  if (!RegUrl.test(str)) {
    return false;
  }
  return true;
}
const textarea = ref('');
function getqrCode() {
  if (props.type == '静态码') {
    qrCode.value = textarea.value;
  } else if (props.type == '网址') {
    console.log('isUrl(url.value):', url.value, CheckUrl(url.value));
    if (CheckUrl(url.value)) {
      qrCode.value = url.value;
    }
  } else if (props.type == '名片') {
    console.log(':', card.value);
    const data = {};
    data.id = 0;
    data.eqTitle = `${card.value.name}的电子名片`;

    data.eqJson = JSON.stringify(card.value);
    data.eqType = 2;
    data.eqStatus = 1;
    data.eqPass = '';

    data.eqLimitedperiod = 0;
    data.eqLimitedperiodStart = null;
    data.eqLimitedperiodEnd = null;
    data.eqOpenmode = 0;
    data.eqtId = 0;

    saveQrcode(data).then((res) => {
      console.log('res', res);
      if (res.data.code == 200) {
        ElMessage({
          message: '保存成功',
          type: 'success',
        });
        //r.value = true;
        rimg.value = res.data.data.codeinfo.qrcodeTitleimg;
        // uni.showToast({
        //   title: '保存成功',
        //   icon: 'success',
        //   duration: 2000,
        // });
        // uni.navigateTo({
        //   url: `/pages/main/ecode?id=${res.data.codeinfo.id}`,
        // });
      } else {
        // uni.showModal({
        //   title: '提示',
        //   content: res.msg,
        //   cancelText: '取消', // 取消按钮的文字
        //   confirmText: '升级会员', // 确认按钮的文字
        //   showCancel: true, // 是否显示取消按钮，默认为 true
        //   confirmColor: '#f55850',
        //   success: (res) => {
        //     if (res.confirm) {
        //       console.log('comfirm'); // 点击确定之后执行的代码
        //       uni.navigateTo({
        //         url: `/pages/vip/index`,
        //       });
        //     } else {
        //       console.log('cancel'); // 点击取消之后执行的代码
        //     }
        //   },
        // });
      }
    });
  } else {
    console.log(':', card.value);
    const data = {};
    data.id = 0;
    data.eqTitle = moment().format('YYYY-MM-DD hh:mm:ss');

    data.eqJson = JSON.stringify(list.value);
    data.eqType = 1;
    data.eqStatus = 1;
    data.eqPass = '';

    data.eqLimitedperiod = 0;
    data.eqLimitedperiodStart = null;
    data.eqLimitedperiodEnd = null;
    data.eqOpenmode = 0;
    data.eqtId = 0;

    saveQrcode(data).then((res) => {
      console.log('res', res);
      if (res.data.code == 200) {
        ElMessage({
          message: '保存成功',
          type: 'success',
        });
        //r.value = true;
        rimg.value = res.data.data.codeinfo.qrcodeTitleimg;
        console.log('rimg.value:', rimg.value);
        // uni.showToast({
        //   title: '保存成功',
        //   icon: 'success',
        //   duration: 2000,
        // });
        // uni.navigateTo({
        //   url: `/pages/main/ecode?id=${res.data.codeinfo.id}`,
        // });
      } else {
        // uni.showModal({
        //   title: '提示',
        //   content: res.msg,
        //   cancelText: '取消', // 取消按钮的文字
        //   confirmText: '升级会员', // 确认按钮的文字
        //   showCancel: true, // 是否显示取消按钮，默认为 true
        //   confirmColor: '#f55850',
        //   success: (res) => {
        //     if (res.confirm) {
        //       console.log('comfirm'); // 点击确定之后执行的代码
        //       uni.navigateTo({
        //         url: `/pages/vip/index`,
        //       });
        //     } else {
        //       console.log('cancel'); // 点击取消之后执行的代码
        //     }
        //   },
        // });
      }
    });
  }
}
const url = ref('');
const value = ref('平铺');
const size = ref('');
const accept = ref('');
if (props.type == '图片') {
  accept.value = '.png, .jpeg,.gif, .bmp, .webp';
} else if (props.type == '音视频') {
  accept.value = '.mp4,.avi,.mov,.wav,.aac,.m4a,.mp3,.wav,.aac';
} else if (props.type == '音频') {
  accept.value = '.mp3,.wav,.aac,.m4a';
} else if (props.type == '文件') {
  accept.value = '.doc,.xlsx,.xls,.docx,.ppt,.pptx,.pdf';
}
const loadProgress = ref(0);
const progressFlag = ref(false);
const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
let list = ref([]);
let fileList = ref([]);
function UploadOss(option) {
  progressFlag.value = true;
  console.log(option);
  let objName = option.file.name;
  let fileName = moment().format('YYYY/MM/DD');
  //this.uploadLoading = true
  fileput(`pc/${fileName}/${objName}`, option.file)
    .then((res) => {
      console.log(res);
      if (res.res.statusCode === 200) {
        console.log('上传成功', res);
        progressFlag.value = false;
        console.log('option.file', option.file);
        console.log('value.value :', value.value);
        if (value.value == '滚动') {
          list.value[0].value.push(res.url);
        } else {
          console.log(':123');
          console.log('porps.type:', props.type);
          if (props.type == '图片') {
            uploadfile_saveone(0, res.url, option.file.size, 0).then((f) => {
              let d = {
                key: '图片',
                value: res.url,
                name: option.file.name,
                fileId: f.data.data.uploadfileinfo.fileId,
                size: formatBytes(option.file.size),
                grid: 'w-full',
                uid: option.file.uid,
              };
              console.log('d:', d);
              list.value.push(d);
              fileList.value.push(option.file);
              console.log('fileList:', fileList.value);
            });
          } else if (props.type == '音视频') {
            var key = getFileType(res.url);
            size.value = formatBytes(option.file.size);
            console.log('key:', key);
            uploadfile_saveone(0, res.url, option.file.size, 0).then((f) => {
              console.log('f:', f);
              if (f.data.code === 200) {
                if (list.value.length > 0 && list.value[0].value != '') {
                  console.log('？？？？？？？');
                  uploadfile_saveone(list.value[0].fileId, list.value[0].value, 0, 0);
                }
                if (key == '视频') {
                  let d = {
                    key: '视频',
                    value: res.url,
                    grid: 'w-full',
                    fileId: f.data.data.uploadfileinfo.fileId,
                    download: false,
                    mode: 'aspect-16_a_9',
                  };

                  console.log('d:', d);
                  list.value.push(d);
                  console.log('list.value:', list.value);
                } else if (key == '音频') {
                  let d = {
                    key: '音频',
                    value: res.url,

                    name: res.url,
                    size: option.file.size,
                    fileId: f.data.data.uploadfileinfo.fileId,
                    grid: 'w-full',
                  };
                  console.log('d:', d);
                  list.value.push(d);
                }
              }
            });
          } else if (props.type == '文件') {
            var key = getFileType(res.url);
            size.value = formatBytes(option.file.size);
            console.log('key:', key);
            uploadfile_saveone(0, res.url, option.file.size, 0).then((f) => {
              console.log('f:', f);
              if (f.data.code === 200) {
                let d = {
                  key: '文件',
                  value: res.url,

                  name: res.url,
                  size: size.value,
                  fileId: f.data.data.uploadfileinfo.fileId,
                  grid: 'w-full',
                };
                console.log('d:', d);
                list.value.push(d);
                console.log('list.value:', list.value);
              }
            });
          }
        }
        console.log('list:', list.value);
      } else {
        console.log('上传失败');
      }
    })
    .catch((err) => {
      //showToast('上传文件异常:' + err, 'error');
    });
}
const handleRemove = (file) => {
  console.log('fileList:', fileList.value);
  console.log('file:', file);

  // 根据当前要删除图片uid，获取该uid在uid数组中所对应的下标
  const index = list.value.findIndex((item) => item.uid === file.uid);
  console.log('index:', index);
  // 在imageIds数组中找到它！干掉它！
  list.value.splice(index, 1);
};
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const handleDownload = (file) => {
  console.log(file);
};
function UploadOss2(option) {
  progressFlag.value = true;
  console.log(option);
  let objName = option.file.name;
  let fileName = moment().format('YYYY/MM/DD');
  //this.uploadLoading = true
  fileput(`pc/${fileName}/${objName}`, option.file)
    .then((res) => {
      console.log(res);
      if (res.res.statusCode === 200) {
        console.log('上传成功', res);
        progressFlag.value = false;
        console.log('option.file', option.file);
        console.log('value.value :', value.value);
        if (value.value == '滚动') {
          list.value[0].value.push(res.url);
        } else {
          console.log(':123');
          console.log('porps.type:', props.type);
          if (props.type == '图片') {
            // let d = {
            //   key: '图片',
            //   value: res.url,
            //   name: option.file.name,
            //   size: formatBytes(option.file.size),
            //   grid: 'w-full',
            // };
            // console.log('d:', d);
            list.value[0].value = res.url;
          } else if (props.type == '音视频') {
            var key = getFileType(res.url);
            size.value = formatBytes(option.file.size);
            console.log('key:', key);
            uploadfile_saveone(0, res.url, option.file.size, 0).then((f) => {
              console.log('f:', f);
              if (f.data.code === 200) {
                if (list.value.length > 0 && list.value[0].value != '') {
                  console.log('？？？？？？？');
                  uploadfile_saveone(list.value[0].fileId, list.value[0].value, 0, 0);
                }
                if (key == '视频') {
                  // let d = {
                  //   key: '视频',
                  //   value: res.url,
                  //   grid: 'w-full',
                  //   fileId: f.data,
                  //   download: false,
                  //   mode: 'aspect-16/9',
                  // };

                  // console.log('d:', d);
                  // list.value.push(d);
                  // console.log('list.value:', list.value);
                  list.value[0].key = key;
                  list.value[0].value = res.url;
                } else if (key == '音频') {
                  // let d = {
                  //   key: '音频',
                  //   value: res.url,

                  //   name: res.url,
                  //   size: 0,
                  //   fileId: 0,
                  //   grid: 'w-full',
                  // };
                  // console.log('d:', d);
                  // list.value.push(d);
                  list.value[0].key = key;
                  list.value[0].value = res.url;
                }
              }
            });
          } else if (props.type == '文件') {
            var key = getFileType(res.url);
            size.value = formatBytes(option.file.size);
            console.log('key:', key);
            uploadfile_saveone(0, res.url, option.file.size, 0).then((f) => {
              console.log('f:', f);
              if (f.data.code === 200) {
                if (list.value.length > 0 && list.value[0].value != '') {
                  console.log('？？？？？？？');
                  uploadfile_saveone(list.value[0].fileId, list.value[0].value, 0, 0);
                }
                list.value[0].size = size.value;
                list.value[0].value = res.url;
              }
            });
          }
        }
        console.log('list:', list.value);
      } else {
        console.log('上传失败');
      }
    })
    .catch((err) => {
      //showToast('上传文件异常:' + err, 'error');
    });
}
function uploadAvatar(option) {
  let objName = option.file.name;
  let fileName = moment().format('YYYY/MM/DD');
  fileput(`pc/${fileName}/${objName}`, option.file).then((res) => {
    console.log(res);
    if (res.res.statusCode === 200) {
      console.log('上传成功', res);
      progressFlag.value = false;
      console.log('option.file', option.file);
      console.log('value.value :', value.value);
      card.value.avatar = res.url;
    }
  });
}
function returnOfficeIcon(filePath) {
  const extension = filePath.split('.').pop().toLowerCase();
  if (extension === 'doc' || extension === 'docx') {
    return 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E6%96%87%E5%9B%BE%E6%A0%87/WORD.png';
  } else if (extension === 'xls' || extension === 'xlsx') {
    return 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E6%96%87%E5%9B%BE%E6%A0%87/Microsoft-Excel.png';
  } else if (extension === 'ppt' || extension === 'pptx') {
    return 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E6%96%87%E5%9B%BE%E6%A0%87/PPT.png';
  } else if (extension === 'pdf') {
    return 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E6%96%87%E5%9B%BE%E6%A0%87/PDF.png';
  } else {
    return 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E6%96%87%E5%9B%BE%E6%A0%87/%E5%85%B6%E4%BB%96%E6%96%87%E4%BB%B6.png';
  }
}
function uploadVideoProcess(event, file, fileList) {
  progressFlag.value = true; // 显示进度条
  loadProgress.value = parseInt(event.percent); // 动态获取文件上传进度
  console.log('loadProgress.value:', loadProgress.value);
  if (loadProgress.value >= 100) {
    loadProgress.value = 100;
    setTimeout(() => {
      progressFlag.value = false;
    }, 1000); // 一秒后关闭进度条
  }
}

function getFileType(fileUrl) {
  // 获取文件的扩展名
  const extension = fileUrl.split('.').pop().toLowerCase();

  // 定义不同类型文件的扩展名
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif'];
  const videoExtensions = ['mp4', 'wav', 'avi', 'mov'];
  const audioExtensions = ['mp3', 'wav', 'aac', 'm4a'];
  const fileExtensions = ['doc', 'xlsx', 'xls', 'docx', 'ppt', 'pptx', 'pdf'];
  // 检查扩展名并返回文件类型
  if (imageExtensions.includes(extension)) {
    return '图片';
  } else if (videoExtensions.includes(extension)) {
    return '视频';
  } else if (audioExtensions.includes(extension)) {
    return '音频';
  } else if (fileExtensions.includes(extension)) {
    return '文件';
  } else {
    return '未知';
  }
}

function selectChanged(value) {
  console.log(value);

  if (value == '滚动') {
    var values = [];
    if (list.value.length > 0) {
      for (let i = 0; i < list.value.length; i++) {
        values.push(list.value[i].value);
      }
    }
    list.value = [
      {
        key: '滚动',
        value: values,
        grid: 'w-full',
        mode: 'aspectFit',
      },
    ];
    console.log('list.value:', list.value);
  } else {
    for (let i = 0; i < list.value[0].value.length; i++) {
      let d = {
        key: '图片',
        value: list.value[0].value[i],
        name: list.value[0].value[i],
        size: 0,
        grid: 'w-full',
      };
      list.value.push(d);
    }
    list.value.splice(0, 1);
  }
}
function checked1change(value) {
  console.log(value);
  checked1.value = value;
  if (checked1.value) {
    list.value[0].download = ['允许下载'];
  } else {
    list.value[0].download = false;
  }
}
function checked2change(value) {
  console.log(value);
  checked2.value = value;
  if (checked2.value) {
    list.value[0].mode = 'aspect-9_a_16';
  } else {
    list.value[0].mode = 'aspect-16_a_9';
  }
}
function checked3change(value) {
  console.log(value);
  checked3.value = value;
  if (checked3.value) {
    list.value[0].full = ['默认全屏'];
  } else {
    list.value[0].full = false;
  }
}
function checked4change(value) {
  console.log(value);
  checked4.value = value;
  if (checked4.value) {
    list.value[0].download = ['允许下载'];
  } else {
    list.value[0].download = false;
  }
}

onMounted(() => {
  // selectImage(0);
});
</script>
<style>
.img .el-upload--picture-card {
  width: 120px !important;
  height: 120px !important;
}

.img .el-upload-list--picture-card .el-upload-list__item {
  width: 120px !important;
  height: 120px !important;
}

.url .el-input__inner {
  text-align: left !important;
}
</style>
<style scoped lang="less">
.el-upload {
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
}

.onerow {
  overflow: hidden; /* 超出容器部分隐藏 */
  white-space: nowrap; /* 不允许文本换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.selected2 {
  padding: auto;
  border: 3px #fed440 solid;
}
/* 自定义滚动条样式 */
.cc::-webkit-scrollbar {
  height: 20px; /* 滚动条整体的高宽 */
}

.cc::-webkit-scrollbar-thumb {
  background: rgba(248, 210, 2, 1); /* 滑块的颜色 */
  border-radius: 5px; /* 滑块的圆角 */
}

.cc::-webkit-scrollbar-track {
  background: #f0f0f0; /* 轨道的颜色 */
}
.item {
  display: inline-block; /* 或者使用 inline */
  width: 120px; /* 小div的宽度 */
  height: 60px; /* 高度与容器相同 */
  background-color: #f0f0f0; /* 背景颜色，可以根据需要调整 */
  margin-right: 10px; /* 子元素之间的间距 */
}
.component-tip {
  margin-top: 24px;
  height: 48px;
  line-height: 48px;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  text-align: center;
  color: #666;
}

.component-tip:hover {
  background-color: #fcfcfc;
}

.component-tip:hover a,
.component-tip a {
  color: #2578e3;
}

.component-preview div,
.component-preview h3,
.component-preview p,
.component-preview span {
  word-break: break-all;
}

.component-preview h3 {
  padding: 0;
  margin: 0;
}

.component-preview .imgTip {
  margin-top: 20px;
  text-align: center;
  font-size: 15px;
  color: #7f8c8d;
}

.component-preview .no-data img {
  display: block;
  margin: 0 auto auto;
  width: 276px;
}

.component-preview .vip-tip {
  text-align: center;
  color: #999;
  font-size: 12px;
}

.component-preview .view-box {
  width: 310px;
  min-height: 540px;
  background: #fff;
  box-shadow: 0 3px 5px 3px rgba(0, 19, 11, 0.08);
}

.component-preview .view-box .mini-header {
  position: relative;
  z-index: 9;
}

.component-preview .view-box .mini-header img {
  width: 100%;
}

.component-preview .view-box .mini-header .h3 {
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.component-preview .view-box .mini-content {
  padding-top: 10px;
  padding-bottom: 20px;
  height: 485px;
  overflow-y: auto;
}

.component-preview .view-box .mini-content::-webkit-scrollbar-track-piece {
  background: #fafafa;
}

.component-preview .view-box .mini-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.component-preview .view-box .mini-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 20px;
}

.component-preview .view-box .mini-content.top {
  position: relative;
  margin-top: -56px;
  padding-top: 0;
  height: 560px;
}

.component-preview .view-box .mini-content .group-module {
  margin-top: -20px;
}

.component-preview .view-box .mini-content .group-module ul {
  margin: 0;
  padding: 13px;
}

.component-preview .view-box .mini-content .group-module ul:after {
  content: '';
  display: table;
  clear: both;
}

.component-preview .view-box .mini-content .group-module ul li {
  float: left;
  margin-bottom: 12px;
  margin-right: 12px;
  width: 136px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  font-size: 13px;
  font-weight: 400;
  color: #2578e3;
  list-style-type: none;
  border-radius: 36px;
  background: rgba(37, 120, 227, 0.04);
  border: 1px solid rgba(37, 120, 227, 0.5);
}

.component-preview .view-box .mini-content .group-module ul li:nth-child(2n) {
  margin-right: 0;
}

.component-preview .view-box .mini-content .group-module img {
  display: block;
  margin: 20px auto auto;
  max-width: 90%;
  max-height: 100%;
}

.component-preview .view-box .mini-content .img-module img {
  display: block;
  margin: 0 auto auto;
  width: 278px;
}

.component-preview .view-box .mini-content .img-module .margin {
  margin-bottom: 8px;
}

.component-preview .view-box .mini-content .img-module .banner {
  position: relative;
}

.component-preview .view-box .mini-content .img-module .banner img {
  border-radius: 5px;
}

.component-preview .view-box .mini-content .img-module .full img {
  width: 100%;
  border-radius: 0;
}

.component-preview .view-box .mini-content .img-module .full .page {
  right: 8px;
}

.component-preview .view-box .mini-content .img-module .page {
  position: absolute;
  right: 27px;
  bottom: 24px;
  padding: 0 6px;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  background: rgba(0, 0, 0, 0.5);
}

.component-preview .view-box .mini-content .img-module .point {
  text-align: center;
}

.component-preview .view-box .mini-content .img-module .point span {
  display: inline-block;
  margin: 0 2px;
  width: 6px;
  height: 6px;
  background: #e1e1e1;
  border-radius: 50%;
}

.component-preview .view-box .mini-content .img-module .point span:first-child {
  background-color: #2578e3;
}

.component-preview .view-box .mini-content .file-module h3 {
  padding: 0 20px;
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
  color: #333;
  text-align: center;
  word-break: break-all;
}

.component-preview .view-box .mini-content .file-module .files-box {
  margin: 30px auto auto;
  padding: 16px;
  width: 272px;
  background: #fcfcfc;
  border-radius: 4px;
  border: 1px solid #e7e7e7;
}

.component-preview .view-box .mini-content .file-module .files-box .file {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e7e7e7;
}

.component-preview .view-box .mini-content .file-module .files-box .file:last-child {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.component-preview .view-box .mini-content .file-module .files-box .no-style {
  margin: 0;
  padding: 0;
  border: none;
}

.component-preview .view-box .mini-content .file-module .files-box img {
  position: absolute;
  left: 0;
  top: 50%;
  height: 38px;
  transform: translateY(-50%);
}

.component-preview .view-box .mini-content .file-module .files-box dl {
  position: relative;
  padding-left: 45px;
}

.component-preview .view-box .mini-content .file-module .files-box dl:after {
  content: '';
  display: table;
  clear: both;
}

.component-preview .view-box .mini-content .file-module .files-box dl dd {
  float: left;
}

.component-preview .view-box .mini-content .file-module .files-box dl dt {
  float: left;
  width: 200px;
}

.component-preview .view-box .mini-content .file-module .files-box dl dt h4 {
  padding-top: 0;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  word-wrap: break-word;
  word-break: normal;
}

.component-preview .view-box .mini-content .file-module .files-box dl dt p {
  margin-top: 5px;
  line-height: 12px;
  font-size: 12px;
  font-weight: 400;
  color: #999;
}

.component-preview .view-box .mini-content .file-module .single-file {
  margin-top: 20px;
  text-align: center;
}

.component-preview .view-box .mini-content .file-module .single-file dd img {
  height: 65px;
}

.component-preview .view-box .mini-content .file-module .single-file dt {
  margin-top: 10px;
}

.component-preview .view-box .mini-content .file-module .single-file h3 {
  line-height: 20px;
  font-size: 15px;
  font-weight: 400;
}

.component-preview .view-box .mini-content .file-module .single-file p {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #9a9a9a;
}

.component-preview .view-box .mini-content .file-module .single-file .el-button {
  padding: 8px 20px;
  width: 130px;
}

.component-preview .view-box .mini-content .audio-module .title {
  padding: 0 20px;
  line-height: 20px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  word-break: break-all;
}

.component-preview .view-box .mini-content .audio-module dl {
  padding-top: 50px;
  text-align: center;
}

.component-preview .view-box .mini-content .audio-module dl dd {
  color: #2578e3;
  font-size: 54px;
}

.component-preview .view-box .mini-content .audio-module dl dt {
  line-height: 1;
}

.component-preview .view-box .mini-content .audio-module dl dt h3 {
  margin-top: 15px;
  padding: 0 40px;
  font-size: 16px;
  font-weight: 500;
  word-break: break-all;
}

.component-preview .view-box .mini-content .audio-module dl dt p {
  margin-top: 10px;
  font-size: 13px;
  color: #999;
  font-weight: 400;
}

.component-preview .view-box .mini-content .audio-module .process {
  position: relative;
  margin: 20px auto auto;
}

.component-preview .view-box .mini-content .audio-module .process .point {
  position: absolute;
  left: 30px;
  top: -5px;
  width: 14px;
  height: 14px;
  background: #fff;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

.component-preview .view-box .mini-content .audio-module .process p {
  width: 240px;
  height: 4px;
  background: #eaeaea;
  margin: 0 auto auto;
  border-radius: 4px;
}

.component-preview .view-box .mini-content .audio-module .process .end,
.component-preview .view-box .mini-content .audio-module .process .start {
  position: absolute;
  top: 16px;
  line-height: 12px;
  font-size: 12px;
  color: #999;
}

.component-preview .view-box .mini-content .audio-module .process .start {
  left: 30px;
}

.component-preview .view-box .mini-content .audio-module .process .end {
  right: 30px;
}

.component-preview .view-box .mini-content .video-module .title {
  padding: 0 20px;
  line-height: 20px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  word-break: break-all;
}

.component-preview .view-box .mini-content .video-module .video-box {
  position: relative;
  margin: 20px auto auto;
  width: 272px;
  min-height: 154px;
  overflow: hidden;
  border-radius: 5px;
}

.component-preview .view-box .mini-content .video-module .video-box.vertical {
  height: 363px;
}

.component-preview .view-box .mini-content .video-module .video-box.vertical img {
  max-width: 272px;
  max-height: 363px;
  -o-object-fit: cover;
  object-fit: cover;
}

.component-preview .view-box .mini-content .video-module .video-box img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 272px;
  max-height: 154px;
  z-index: 2;
}

.component-preview .view-box .mini-content .video-module .video-box .cover-img {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0);
  width: 100%;
  height: 100%;
  background: #000;
  filter: blur(10px);
  z-index: 1;
  -o-object-fit: cover;
  object-fit: cover;
}

.component-preview .view-box .mini-content .video-module .cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  border-radius: 5px;
}

.component-preview .view-box .mini-content .video-module .cover span {
  position: absolute;
  color: #fff;
}

.component-preview .view-box .mini-content .video-module .cover .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  background-image: url(https://hulianqrcode.oss-cn-hangzhou.aliyuncs.com/web/pc/editor/icon-cover-play.png);
  background-size: 100% 100%;
}

.component-preview .view-box .mini-content .video-module .cover .name {
  left: 12px;
  top: 12px;
  right: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.component-preview .view-box .mini-content .video-module .cover .time {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  top: calc(50% + 32px);
  font-size: 12px;
}

.component-preview .view-box .mini-content .video-module .cover .download {
  top: 12px;
  right: 12px;
}

.component-preview .view-box .mini-content .card-widget {
  padding: 0 20px 30px;
  background: #fff;
}

.component-preview .view-box .mini-content .card-widget .card-con {
  position: relative;
  padding: 14px;
  height: 160px;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 0 8px 0 rgba(0, 19, 11, 0.1);
  border-radius: 4px;
  line-height: 1;
  font-size: 14px;
  font-weight: 400;
  color: #000;
}

.component-preview .view-box .mini-content .card-widget .card-con .name {
  max-width: 165px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.component-preview .view-box .mini-content .card-widget .card-con .phone {
  margin-top: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-preview .view-box .mini-content .card-widget .card-con .position {
  margin-top: 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-preview .view-box .mini-content .card-widget .card-con .company {
  position: absolute;
  bottom: 14px;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-preview .view-box .mini-content .card-widget .card-con img {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.component-preview .view-box .mini-content .card-widget .card-msg {
  margin-top: 16px;
  border-top: 1px solid #eaeaea;
}

.component-preview .view-box .mini-content .card-widget .card-msg .label {
  display: flex;
  padding: 10px 0;
  justify-content: space-between;
  border-bottom: 1px solid #eaeaea;
  line-height: 22px;
  font-size: 14px;
  color: #333;
}

.component-preview .view-box .mini-content .card-widget .card-msg .label .icon,
.component-preview .view-box .mini-content .card-widget .card-msg .label .more {
  width: 24px;
  min-width: 24px;
  font-size: 15px;
  color: #666;
}

.component-preview .view-box .mini-content .card-widget .card-msg .label .more {
  min-width: 10px !important;
  text-align: right;
  color: #acacac;
}

.component-preview .view-box .mini-content .card-widget .card-msg .label .con {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-preview .view-box .mini-content .card-widget .card-msg .label .link {
  color: #2578e3;
}

.component-preview .view-box .mini-content .card-widget .card-btn {
  margin: 20px auto auto;
  height: 34px;
  background: #2578e3;
  color: #fff;
  text-align: center;
  line-height: 34px;
  font-size: 14px;
  border-radius: 3px;
}

.component-preview .view-box .mini-content .map-module {
  margin: 0 auto auto;
  width: 278px;
  padding: 12px 16px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.12);
  border-radius: 5px;
}

.component-preview .view-box .mini-content .map-module .title {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  line-height: 22px;
}

.component-preview .view-box .mini-content .map-module .box .item {
  margin-top: 8px;
  vertical-align: top;
}

.component-preview .view-box .mini-content .map-module .box .item span {
  vertical-align: top;
  display: inline-block;
}

.component-preview .view-box .mini-content .map-module .box .item .icon {
  width: 13px;
  height: 13px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 13px 13px;
}

.component-preview .view-box .mini-content .map-module .box .item .icon-tel {
  background-image: url(https://oss.hlcode.cn/web/pc/editor/icon-tel.png);
}

.component-preview .view-box .mini-content .map-module .box .item .icon-site {
  background-image: url(https://oss.hlcode.cn/web/pc/editor/icon-site.png);
}

.component-preview .view-box .mini-content .map-module .box .item .icon-email {
  background-image: url(https://oss.hlcode.cn/web/pc/editor/icon-email.png);
}

.component-preview .view-box .mini-content .map-module .box .item .con {
  width: 178px;
  font-size: 13px;
  font-weight: 400;
  color: #333;
}

.component-preview .view-box .mini-content .map-module .box .item .link {
  margin-left: 20px;
  font-size: 13px;
  font-weight: 400;
  color: #2578e3;
}

.component-preview .view-box .mini-content .map-module .box img {
  margin-top: 14px;
  display: block;
  width: 100%;
  height: 84px;
  -o-object-fit: cover;
  object-fit: cover;
}

.component-preview .view-box .mini-content .map-module .box .remark {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px dashed #e2e2e2;
  font-size: 13px;
  font-weight: 400;
  color: #333;
  line-height: 17px;
}
</style>

